
/* styling for specially marked lines */

pre {
  --glow-line-color: 50, 180, 250;
  --glow-del-color: 250, 110, 130;
  --glow-ins-color: 50, 210, 190;
  --glow-line-opacity: 0.15;

  --padd: var(--glow-padding, 1.5em);

  ins, del, dfn {
    min-width: calc(100% + calc(var(--padd) * 2));
    margin-left: calc(var(--padd) * -1);
    padding-left: var(--padd);
    border-left: .2em solid white;
    display: inline-block;
    position: relative;
    width: 100%;

    :first-child { margin-left: -.2em; }

    /* plus & minus characters  */
    &:before {
      position: absolute;
      left: 95%;
    }

    /* with line numbers */
    span & {
      margin-left: calc(-3.5em - var(--padd));
      padding-left: calc(3.5em + var(--padd));

      /* &:before { left: calc(var(--padd) - 1.5em); } */
    }
  }

  ins {
    border-color: rgb(var(--glow-ins-color));
    background-color: rgba(var(--glow-ins-color), var(--glow-line-opacity));
    &:before {
      content: '+';
      color: rgb(var(--glow-ins-color));
    }
  }

  del {
    border-color: rgb(var(--glow-del-color));
    background-color: rgba(var(--glow-del-color), var(--glow-line-opacity));
    border-radius: 0;

    &:before {
      content: '-';
      color: rgb(var(--glow-del-color));
    }
  }

  dfn {
    border-color: rgb(var(--glow-line-color));
    background-color: rgba(var(--glow-line-color), var(--glow-line-opacity));
  }
}
